<template>
    
    <div><h2>欢迎{{ uname }}登录</h2>
        <br>
        <a href="/add">房号添加</a>
        房间号<input v-model="query.Hname">
        房间类型<select v-model="query.Tid">
                        <option value="0">请选择</option>
                        <option v-for="e in Tid" :value="e.tid">{{e.tname}}</option>
                    </select>
        状态<select v-model="query.State">
                        <option value="-1">请选择</option>
                        <option value="1">已入住</option>
                        <option value="2">空闲</option>
                        <option value="3">打扫中</option>
                    </select>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="重置" @click="chong">
        <table class="table">
            <thead>
                <tr>
                    <th>房间Id</th>
                    <th>房间号</th>
                    <th>房间类型</th>
                    <th>状态</th>
                    <th>价格</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="e in obj">
                    <td>{{ e.hid }}</td>
                    <td>{{ e.hname }}</td>
                    <td>{{ e.tname }}</td>
                    <td>{{ e.state }}</td>
                    <td>{{ e.price }}</td>
                    <td><img :src="'https://localhost:7112'+e.img" style="width: 100px;height: 100px;"></td>
                    <td>
                        <input type="button" value="编辑" @click="upda(e.hid)">
                    </td>
                </tr>
                
            </tbody>
        </table>
        一共{{ page.pagecount }}页,当前第{{ query.pageindex }}页,一共{{ page.count }}条,每页{{ query.pageSize }}条
        <input type="button" value="首页" @click="Fnaye(1)">
        <input type="button" value="上一页" @click="Fnaye(2)">


        <input type="button" value="下一页" @click="Fnaye(3)">
        <input type="button" value="尾页" @click="Fnaye(4)">
        跳转到<input   v-model="index" @change="Index">
        页容量<select v-model="size" @change="Size">
            <option value="2">请选择</option>
            <option value="2">==2==</option>
            <option value="3">==3==</option>
            <option value="4">==4==</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import { onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
import {useuseStore} from '../stores/use';
onMounted(() => {
  Bang();  
  ShowAll();
  get();
})
const use=useuseStore();

const route=useRoute();
const router=useRouter();
//编辑
const upda=(val:any)=>{
    router.push({path:"/Update",query:{id:val}});
}


const uname=ref("")
const get=()=>{
    uname.value=use.login.uname;
}

const Tid=ref([{
    "tid": 1,
    "tname": "标准间",
   
}])
const Bang=()=>{
    axios.get("https://localhost:7112/api/All/Bang",{params:Tid.value}).then(res=>{
        Tid.value=res.data;
    })
}
const obj=ref([{

    "hid": 2,
      "tid": 4,
      "hname": "1002",
      "state": 2,
      "del": false,
      "price": 286,
      "img": "/img/32c4ea17-6d42-48ce-81cc-a21d060d162a1.webp",
      "tname": "商务间"
 
}])
const query=ref({
    "Hname": "",
      "Tid": -1,
      "State": -1,
      "pageindex": 1,
      "pageSize": 2,
})
const chong=()=>{
    query.value.Hname="",
    query.value.Tid=0,
    query.value.State=-1
}


const page=ref({
    "count": 2,
      "pagecount": 4,
})
const Router=useRouter();
const Show=()=>{
    query.value.pageindex=1;
    ShowAll();
}
const ShowAll=()=>{
    axios.get("https://localhost:7112/api/All/ShowAll",{params:query.value}).then(res=>{
        obj.value=res.data.plist;
        page.value.count=res.data.totalcount;
        page.value.pagecount=Math.ceil(page.value.count/query.value.pageSize);
    })
}
const Fnaye=(val)=>{
        if(val==1)
    {
        query.value.pageindex=1;
        ShowAll();
    }
    else if(val==2)
    {
                if(query.value.pageindex>1)
            {
                query.value.pageindex-=1;
                ShowAll();
            }
    }
    else if(val==3)
    {
            if(query.value.pageindex<page.value.pagecount)
        {
            query.value.pageindex+=1;
            ShowAll();
        }
    }
    else{
        query.value.pageindex=page.value.pagecount;
        ShowAll();
    }
}
const index=ref();
const size=ref(2);
const Index=()=>{
    query.value.pageindex=index.value;
    ShowAll();
}
const Size=()=>{
    query.value.pageSize=size.value;
    ShowAll();
}
const Jump=()=>{
    query.value.pageindex
    ShowAll();
}
</script>

<style scoped>

</style>